<template>
  <el-card style="max-width: 100%">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="类型" prop="workorder_type">
        <el-select v-model="ruleForm.workorder_type" placeholder="请选择">
          <el-option
            v-for="item in selectWorkOrderData"
            :key="item.workorder_type"
            :label="item.workorder_type"
            :value="item.workorder_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="编码" prop="codeid">
        <el-select v-model="ruleForm.codeid" placeholder="请选择">
          <el-option
            v-for="item in selectWorkOrderData"
            :key="item.codeid"
            :label="item.codeid"
            :value="item.codeid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工艺" prop="proces_sroute">
        <el-select v-model="ruleForm.proces_sroute" placeholder="请选择">
          <el-option
            v-for="item in selectWorkOrderData"
            :key="item.proces_sroute"
            :label="item.proces_sroute"
            :value="item.proces_sroute"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="seachdata"> 查询 </el-button>
        <el-button @click="lockdialog">锁定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="max-width: 100%"
    ><el-table :data="tableData" style="width: 100%">
      <el-table-column fixed type="index" label="序号" width="100" />
      <el-table-column prop="workorder_type" label="类型" width="150" />
      <el-table-column prop="codeid" label="编号" width="150" />
      <el-table-column prop="process_progress" label="工序" width="200" />
      <el-table-column prop="start_time" label="锁定起止日期" width="400">
        <template #default="scope">
          {{ scope.row.start_time }} - {{ scope.row.end_time }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作列" min-width="120">
        <template #default>
          <!-- <el-button link type="primary" size="small" @click="handleClick"> Detail </el-button>
          <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table></el-card
  >
  <el-dialog v-model="dialogFormVisible" title="产品锁定" width="600">
    <el-form label-width="80px"  style="max-width: 500px">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="ruleForm.lock_starttime"
          type="datetime"
          placeholder="选择开始时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
          prefix-icon="el-icon-time"
        />
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
          v-model="ruleForm.lock_endtime"
          type="datetime"
          placeholder="选择结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
          prefix-icon="el-icon-time"
        />
      </el-form-item>

      <el-form-item label="锁定原因">
        <el-input
          v-model="ruleForm.lock_reason"
          type="textarea"
          :rows="4"
          placeholder="请输入锁定原因"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="success" style="width: 80px" @click="savelock">锁定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'

interface WorkOrderData {
  workorder_type: string
  codeid: string
  proces_sroute: string
}

const ruleForm = reactive({
  codeid: '',
  workorder_type: '',
  proces_sroute: '',
  lock_reason: '',
  lock_starttime: '',
  lock_endtime: ''
})

const selectWorkOrderData = ref<WorkOrderData[]>([])
onMounted(() => {
  getSelectWorkOrder()
})
const getSelectWorkOrder = () => {
  axios.get('http://localhost:9991/api/ysl_lockOrUnlock/SelectWorkOrder').then((res) => {
    selectWorkOrderData.value = res.data
    // console.log('selectWorkOrderData=>', selectWorkOrderData.value)
  })
}

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleClick = () => {
  console.log('click')
}

const tableData = ref<any[]>([])
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}))

const seachdata = () => {
  console.log('ruleform=>', ruleForm)

  axios
    .get('http://localhost:9991/api/ysl_lockOrUnlock/GetWorkorder', {
      params: {
        codeid: ruleForm.codeid,
        workorder_type: ruleForm.workorder_type,
        proces_sroute: ruleForm.proces_sroute
      }
    })
    .then((res) => {
      console.log('res=>', res)
      tableData.value = [res.data]
      //console.log('tableData=>', tableData.value)
      ruleForm.codeid = res.data.codeid
      ruleForm.proces_sroute = res.data.proces_sroute
      ruleForm.workorder_type = res.data.workorder_type
    })
}
const dialogFormVisible = ref(false)
const lockdialog = () => {
  dialogFormVisible.value = true
}

const resetFormData = () => {
  ruleForm.lock_starttime = ''
  ruleForm.lock_endtime = ''
  ruleForm.lock_reason = ''
  ruleForm.codeid = ''
  ruleForm.workorder_type = ''
  ruleForm.proces_sroute = ''
  tableData.value = []
}

const savelock = () => {
  if (!ruleForm.lock_starttime || !ruleForm.lock_endtime) {
    ElMessage.warning('请选择开始和结束时间')
    return
  }

  const startTime = new Date(ruleForm.lock_starttime)
  const endTime = new Date(ruleForm.lock_endtime)

  if (endTime <= startTime) {
    ElMessage.warning('锁定结束时间必须大于开始时间')
    return
  }

  const postData = {
    codeid: ruleForm.codeid,
    workorder_type: ruleForm.workorder_type,
    proces_sroute: ruleForm.proces_sroute,
    lock_reason: ruleForm.lock_reason,
    lock_starttime: ruleForm.lock_starttime,
    lock_endtime: ruleForm.lock_endtime
  }
  console.log('postData=>', postData)

  axios
    .post('http://localhost:9991/api/ysl_lockOrUnlock/Addysl_product_lock', postData)
    .then((res: any) => {
      if (res.data == 1) {
        ElMessage.success('锁定成功')
        resetFormData()
        dialogFormVisible.value = false
        getSelectWorkOrder()
      } else {
        ElMessage.error('产品已被锁定')
      }
    })
    .catch((error) => {
      console.error('锁定请求失败:', error)
      ElMessage.error('锁定请求失败')
    })
}
</script>

<style scoped></style>
